<template lang="html">
  <div class="">
    <div class="bt">
       <el-button type="primary" @click="back">返回上一级</el-button>
    </div>
    <div class="search">
        <div class="input">
          <p><label>姓名：</label><el-input v-model="searchData.name" placeholder="请输入内容"/></p>
          <p>
            <label>手机号：</label><el-input v-model="searchData.mobile" placeholder="请输入内容"/>
          </p>
          <p><el-button type="primary" class="se" style="margin-left:10px;" @click="search">搜索</el-button></p>
        </div>
        <div class="">
          <span>一级专员名称：</span><span>{{$route.query.name}}</span>
        </div>
    </div>
      <tableVue
        v-loading="pageData.loading"
        :list="list"
        :state="true"
        :total="total"
        @sizeChange="handSize"
        @changeData="selectionVal">
        <slot>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.row)">详情
              </el-button>
            </template>
          </el-table-column>
        </slot>
      </tableVue>
      <el-dialog
      title="提示"
      :visible="dialogVisible"
      :before-close="handleClose"
      width="80%">
      <div class="listP">
        <p v-for='(item,key) in delist' v-if="listData[key]">
            <span class="dst">{{listData[key]}}</span>：
            <span>{{item}}</span>
        </p>
      </div>
      <div class="renshu">
          <p>
              <span>任务人数</span>：
              <span class="r">{{rtotal}}</span>
          </p>
          <p>
              <span>无效人数</span>：
              <span class="r">{{failTotal}}</span>
          </p>
          <p>
              <span>已完成</span>：
              <span class="r">{{successTotal}}</span>
          </p>
          <p>
              <span>今日完成</span>：
              <span class="r">{{todayTotal}}</span>
          </p>
      </div>
      <tableVue
        v-loading="pageData.loading"
        :list="attacheList"
        :state="true"
        :total="attachetotal"
        @sizeChange="attachehandSize">

        <slot>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.row)">详情
              </el-button>
            </template>
          </el-table-column>
        </slot>
      </tableVue>
      <span slot="footer" class="dialog-footer" style="margin-top: 41px;">
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Data from './index.js'
import dialogVue from '@/components/dialog.vue'
import tableVue from '@/components/alltable.vue'
import {
  getpromoterList,
  getpromoterDetails,
  countTask,
  userList
} from '@/api/activity/promoter'
export default {
  components: {
    tableVue,
    dialogVue
  },
  data() {
    return JSON.parse(JSON.stringify(Data))
  },
  mounted () {
    var data = {
      promoterId : this.$route.query.id
    }
    this.getTwoatt(data);

  },
  methods : {
    getuserList (data) {
      userList (data).then(res=>{
        if (res.data.code == 'OK') {
          this.attachetotal = res.data.data.total;
          this.attacheList.tbody = res.data.data.records.map(item=>{
            item.gmtCreate = this.switchTime(item.gmtCreate);
            item.gmtUpdate = this.switchTime(item.gmtUpdate);
            item.jobDeadTime = this.switchTime(item.jobDeadTime);
            item.jobStartTime = this.switchTime(item.jobStartTime);
            return item
          })
        }
      })
    },
    getcountTask (id) {
      countTask(id).then(res=>{
         if (res.data.code == 'OK') {
           this.todayTotal = res.data.data.todayTotal;
           this.failTotal = res.data.data.failTotal;
           this.successTotal = res.data.data.successTotal
         }
      })
    },
    getTwoatt (data) {
      getpromoterList(data).then(res=>{
         if (res.data.code == 'OK') {
           this.total = res.data.data.total;
           this.list.tbody = res.data.data.records.map(item=>{
             item.gmtCreate = this.switchTime(item.gmtCreate);
             item.gmtUpdate = this.switchTime(item.gmtUpdate);
             item.jobDeadTime = this.switchTime(item.jobDeadTime);
             item.jobStartTime = this.switchTime(item.jobStartTime);
             return item
           })
         }
      })
    },
    handleEdit (item) {
      this.id = item.promoterId;
      this.dialogVisible = true;
      this.getcountTask(item.promoterId);
      this.getuserList({promoterId : item.promoterId})
      getpromoterDetails(item.promoterId).then(res=>{
         if (res.data.code == 'OK') {
           this.delist = res.data.data;
           this.rtotal = res.data.data.jobNum
           this.delist.jobDeadTime = this.switchTime(item.jobDeadTime);
           this.delist.jobStartTime = this.switchTime(item.jobStartTime);
           if (this.delist.promoterLevel == 1) {
             this.delist.promoterLevel = '一级专员'
           } else {
             this.delist.promoterLevel = '二级专员'
           }
         }
      })
    },
    back () {
      this.$router.push({
        name : 'attacheList'
      })
    },
    handSize (val) {
      this.val = val;
      var data = {
        size : '10',
        current : val,
        promoterId : this.$route.query.id
      }
     this.getTwoatt(data);
    },
    selectionVal () {},
    search () {
      var data = {
        name : this.searchData.name,
        mobile : this.searchData.mobile,
        size : '10',
        current : this.val,
        promoterId : this.$route.query.id
      }
     this.getTwoatt(data);
   },
   attachehandSize (val) {
     var data = {
       size : '10',
       current : val,
       promoterId : this.$route.query.id
     }
     this.getuserList(data)
   },
   handleClose(done) {
     this.$confirm('确认关闭？')
       .then(_ => {
         done();
         this.dialogVisible = false;
       })
       .catch(_ => {});
   }
  }
}
</script>

<style scoped>
  @import "../../../../styles/common.css";
  .dst {
    display:inline-block;
    width:120px;
    text-align: justify;
    text-align-last: justify;
    line-height: 0;
    font-size:18px;
  }
  .listP p{
    margin-top: 20px;
    font-size:18px;
  }
  .renshu p {
    margin-right: 20px;
    font-size: 18px;
  }
  .renshu {
    display: flex;
  }
  .r {
    color: red;
  }
  .el-dialog__footer {
      padding: 46px 20px 20px !important;
      padding: 46px 20px 20px;
  }
</style>
